组合 vs 继承

在 React 中，组件的复用和扩展是一个常见的需求。为了实现这一目标，React 提供了两种主要的方式：组合（Composition）和继承（Inheritance）。理解这两种方式的区别和适用场景，对于构建灵活且可维护的 React 应用至关重要。

1. 组合（Composition）

组合是一种通过将组件嵌套在一起，从而实现代码复用的方式。它强调的是“组合优于继承”的设计原则。在 React 中，组合通常通过 props.children 或自定义的 props 来实现。

1.1 使用 props.children

props.children 是一个特殊的 prop，它允许你在组件内部渲染其他组件或元素。这种方式非常适合创建可复用的布局组件。

示例代码

// 定义一个布局组件
function Layout(props) {
  return (
    <div className="layout">
      <header>Header</header>
      <main>{props.children}</main>
      <footer>Footer</footer>
    </div>
  );
}

// 使用布局组件
function App() {
  return (
    <Layout>
      <h1>Welcome to My Website</h1>
      <p>This is the main content.</p>
    </Layout>
  );
}

在这个例子中，Layout 组件通过 props.children 渲染了 App 组件中的内容。这种方式使得 Layout 组件非常灵活，可以用于不同的页面布局。

1.2 使用自定义 props

除了 props.children，你还可以通过自定义的 props 来实现组合。这种方式适用于需要更细粒度控制的情况。

示例代码

// 定义一个可复用的对话框组件
function Dialog(props) {
  return (
    <div className="dialog">
      <h2>{props.title}</h2>
      <div className="content">{props.content}</div>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

// 使用对话框组件
function App() {
  return (
    <Dialog
      title="Confirmation"
      content="Are you sure you want to proceed?"
      onClose={() => alert('Dialog closed')}
    />
  );
}

在这个例子中，Dialog 组件通过自定义的 props（如 title、content 和 onClose）来实现灵活的对话框功能。

1.3 组合的优势

• 灵活性：组合允许你将组件组合在一起，而不需要关心它们的内部实现。
• 可维护性：通过组合，你可以更容易地理解和修改组件的行为。
• 可复用性：组合使得组件可以在不同的上下文中复用。

2. 继承（Inheritance）

继承是一种通过创建子类来扩展父类功能的方式。在 React 中，继承通常用于类组件，但 React 官方文档建议尽量避免使用继承，而是优先使用组合。

2.1 类组件的继承

在 React 中，类组件可以通过继承来扩展功能。例如，你可以创建一个基类组件，然后通过继承来创建具体的组件。

示例代码

// 定义一个基类组件
class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

// 继承基类组件
class ExtendedComponent extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...this.state,
      additionalMessage: 'This is an extended message.'
    };
  }

  render() {
    return (
      <div>
        {super.render()}
        <p>{this.state.additionalMessage}</p>
      </div>
    );
  }
}

// 使用扩展组件
function App() {
  return <ExtendedComponent />;
}

在这个例子中，ExtendedComponent 继承了 BaseComponent，并扩展了其功能。

2.2 继承的劣势

• 复杂性：继承会增加代码的复杂性，使得组件之间的关系变得难以理解。
• 耦合性：继承会导致组件之间的耦合性增加，修改父类可能会影响到所有子类。
• 可维护性：继承使得代码更难以维护和测试。

3. 组合 vs 继承：选择合适的方案

在大多数情况下，组合是更好的选择。它提供了更高的灵活性和可维护性，并且符合 React 的设计哲学。然而，在某些特定场景下，继承可能仍然有用。

3.1 何时使用组合

• 需要复用组件的布局或结构：使用 props.children 或自定义 props。
• 需要灵活地组合组件：组合允许你将组件组合在一起，而不需要关心它们的内部实现。

3.2 何时使用继承

• 需要共享一些通用的逻辑或状态：继承可以用于创建基类组件，并在子类中扩展功能。
• 需要重写或扩展组件的生命周期方法：继承允许你在子类中重写父类的方法。

4. 实践练习

练习 1：使用组合创建一个可复用的卡片组件

创建一个 Card 组件，它包含一个标题、内容和一个按钮。使用 props.children 来实现内容的灵活性。

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <div className="card-content">{props.children}</div>
      <button onClick={props.onButtonClick}>{props.buttonText}</button>
    </div>
  );
}

function App() {
  return (
    <Card
      title="My Card"
      buttonText="Click Me"
      onButtonClick={() => alert('Button clicked!')}
    >
      <p>This is the content of the card.</p>
    </Card>
  );
}

练习 2：使用继承创建一个扩展的表单组件

创建一个基类 FormComponent，它包含一些通用的表单逻辑。然后创建一个子类 LoginForm，它继承自 FormComponent，并扩展了登录功能。

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleInputChange}
        />
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleInputChange}
        />
      </form>
    );
  }
}

class LoginForm extends FormComponent {
  handleSubmit = (event) => {
    event.preventDefault();
    alert(`Username: ${this.state.username}, Password: ${this.state.password}`);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {super.render()}
        <button type="submit">Login</button>
      </form>
    );
  }
}

function App() {
  return <LoginForm />;
}

5. 总结

组合和继承是 React 中实现代码复用的两种主要方式。组合提供了更高的灵活性和可维护性，而继承在某些特定场景下仍然有用。在大多数情况下，建议优先使用组合来构建 React 应用。

通过理解和实践组合与继承，你将能够更好地设计和实现灵活且可维护的 React 组件。